<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ES6模板字符串</title>
</head>

<body>
  <script>
    /*
     模板字符串
       +其实，就是ES6内新增的定义字符串的方式
       +以前：
         =>var str='内容'
         =>var str="内容"
       +现在：
         =>var str=`内容`

     区别：
       1.可以换行书写
       2.可以直接在字符串内解析变量
         =>当你需要解析变量的时候，直接书写${ 变量 }
       */

    //1.
    var s1 = 'hello world'
    var s2 = "hello world"
    var s3 = `

            hello 
            world

            `
    console.log(s1)
    console.log(s2)
    console.log(s3)
    console.log(s1 == s2);
    console.log(s3 === s1)
    console.log(s3 === s2)

    //2.
    var age = 18
    var s1 = '我是前端小灰狼,今年 ${age} 岁'
    console.log(s1)

    var age = 18
    var s2 = "我是前端小灰狼,今年 ${age} 岁"
    console.log(s2)

    var age = 18
    var s3 = `
        我是前端小灰狼,
        今年 ${age} 岁
        `
    console.log(s3)
  </script>
</body>

</html>